<template>
    <div class="work_container">
        <el-form>
            <el-button type="primary" style="margin-bottom:20px" @click="addUserWork">新增工作经历</el-button>
            <div v-for="(work, index) in userWorks" :key="index">
            <div style="display:flex">
                <el-form-item label="工作开始时间" style="margin-right: 80px">
                <el-input v-model="work.start_date" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="工作结束时间">
                <el-input v-model="work.end_date" placeholder=""></el-input>
                </el-form-item>
                <el-button style="height: 41px; margin-left: 30px" icon="el-icon-delete" circle @click="deleteUserWork(index, work.id)"></el-button>
            </div>
            <el-form-item label="工作地址">
                <el-input v-model="work.work_place" placeholder="请输入工作地址"></el-input>
            </el-form-item>
            <div style="display: flex">
                <el-form-item label="工作类型" style="margin-right: 95px">
                <el-input v-model="work.work_kind" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="月工资">
                <el-input v-model="work.salary" placeholder="请输入平均工资"></el-input>
                </el-form-item>
            </div>
            <el-form-item label="备注">
                <el-input v-model="work.remarks" type="textarea" placeholder="请输入工作相关备注"></el-input>
            </el-form-item>
            </div>
            <el-form-item class="btns">
                <el-button type="primary" @click="CompleteWork">添加</el-button>
                <el-button type="info" @click="back">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
  data () {
    return {
      size: '',
      userWorks: [{
        id: 1,
        uid: window.sessionStorage.getItem('uid'),
        work_place: '',
        work_kind: '',
        start_date: '',
        end_date: '',
        salary: '',
        remarks: ''
      }]
    }
  },
  methods: {
    deleteUserWork (index, id) {
      if (index !== -1) {
        this.userWorks.splice(index, 1)
        var token = sessionStorage.getItem('token')
        this.$axios.defaults.headers.Authorization = 'Bearer ' + token
        this.$axios.get('/userWorkInfo/deleteUserWorks', {
          params: {
            id: id
          }
        }).then(response => {
          if (response.data.code === '200') {
            this.$message.success('删除成功!')
            this.size = this.size - 1
          }
          console.log(this.size)
        })
      }
    },
    addUserWork () {
      this.userWorks.push({
        id: 1,
        uid: window.sessionStorage.getItem('uid'),
        work_place: '',
        work_kind: '',
        start_date: '',
        end_date: '',
        salary: '',
        remarks: ''
      })
    },
    GetUserInfo () {
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.get('/userWorkInfo/getUserWorks', {
        params: {
          uid: window.sessionStorage.getItem('uid')
        }
      }).then(response => {
        if (response.data.code === '200') this.$set(this, 'userWorks', response.data.data)
        else if (response.data.code === '201') this.$set(this, 'userWorks', response.data.data)
        this.size = this.userWorks.length
        console.log(this.size)
      })
    },
    back () {
      this.$router.go(-1)
    },
    CompleteWork () {
      var works = []
      var k = 0
      for (var j = this.size; j < this.userWorks.length; j++) {
        works[k] = this.userWorks[j]
        k = k + 1
      }
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.post('/userWorkInfo/insertUserWorks', works).then(response => {
        if (response.data.code === '201') this.$message.error('添加失败!')
        else if (response.data.code === '200') {
          this.$message.success('添加成功!')
          this.GetUserInfo()
        }
      })
    }
  },
  mounted () {
    this.GetUserInfo()
  }
}
</script>

<style lang="less" scoped>
.work_container{
    width: 800px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 25%;
    top: 20px;
}
.btns{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    margin-bottom: 40px;
}
</style>
